(function () {
    let template = function (type, value, placeholder) {
        return `
<aux-view class="aux-input">
    <input class="input" type="${type ? type : 'text'}" value="${value ? value : ''}" >
    <div class="placeholder"><div>${placeholder ? placeholder : ""}</div></div>
    <div class="readonly"></div> 
</aux-view>
        `;
    };
    
    (function () {

        function disablePlaceHolder(self) {
            self.$ele.placeholder.style.display = "none";
        }

        function enablePlaceholder(self) {
            self.$ele.placeholder.style.display = "block";
        }

        function handleDisabled(self, newval) {
            if (newval && newval != null) {
                if (!self.$locked) {
                    self.$locked = true;
                    self.$ele.input.blur();
                }
            } else {
                if (self.$locked) {
                    self.$locked = false;
                }
            }
        }

        function handleValue(self, newval) {
            self.$ele.input.value = newval;
        }
        
        function handleAttributes(self) {
            if (self.hasAttribute("disabled")) {
                self.$locked = true;
                self.$ele.input.setAttribute("disabled", "disabled");
            } else {
                self.$locked = false;
                self.$ele.input.removeAttribute("disabled");
            }
            if (self.hasAttribute("name")) {
                self.$ele.input.name = self.getAttribute("name");
            }
            handleValueWithPlaceholder(self);
        }

        function handleValueWithPlaceholder(self) {
            let val = self.$ele.input.value;
            if (!val || val.length < 1) {
                self.$ele.root.auiRemoveOnceClass("not-empty");
                enablePlaceholder(self);
            } else {
                disablePlaceHolder(self);
                self.$ele.root.auiAddOnceClass("not-empty");
            }
        }

        return  window.defineCustomElement(
            'aux-input',
            {
                createdCallback: {value: function() {

                    }},
                attachedCallback: {value: function () {
                        let self = this;
                        self.$ele = {};
                        self.value = "";
                        self.$locked = false;
                        self.innerHTML = template(self.auiGetAttribute("type"), 
                                                  self.auiGetAttribute("value"), 
                                                  self.auiGetAttribute("placeholder"));

            
                        self.$ele.root = self.auiFindSelector("> .aux-input");                        
                        self.$ele.placeholder = this.$ele.root.children[1];
                        self.$ele.input = self.$ele.root.children[0];

                        handleAttributes(self);

                        self.$ele.placeholder.addEventListener("click", function (e) {
                            e.stopPropagation();
                            e.preventDefault();
                            if (!self.$locked) {
                                self.$ele.input.focus();
                            }
                        });

                        let eventname = "input";
                        if (document.auiIeVersion > 0 && document.auiIeVersion < 10) {
                            eventname = "keyup";
                            self.$ele.input.addEventListener("keydown", function (e) {
                                e.stopPropagation();
                                if (e.which !== 8) {
                                    if (!self.$ele.input.value || self.$ele.input.value.length < 1) {
                                        disablePlaceHolder(self);
                                        self.$ele.root.auiAddOnceClass("not-empty");
                                    }
                                }
                            });
                        }

                        self.$ele.input.addEventListener(eventname, function (e) {
                            e.stopPropagation();
                            handleValueWithPlaceholder(self);
                        });

                    }},
                attributeChangedCallback: {value: function (name, oldval, newval) {
                        let self = this;
                        if (name === "disabled") {
                            handleDisabled(self, newval, oldval)
                        }
                        if (name === "value") {
                            handleValue(self, newval, oldval);
                        }
                    }}
            }
        );

    }());

    document.createElement('aux-input');
})();


